<template>
  <Category :sceen="sceen"></Category>
  <el-card style="margin-top: 10px">
    <div v-show="sceen == 0">
      <el-button
        type="primary"
        icon="Plus"
        @click="addSpu()"
        :disabled="!categoryStore.c3Id"
      >
        添加SPU
      </el-button>
      <el-table :data="tableData" border style="margin: 10px 0px; width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="spuName" label="SPU名称" width="120" />
        <el-table-column prop="description" label="spu描述"></el-table-column>
        <el-table-column prop="address" label="SPU操作" width="220">
          <template #="{ row, index }">
            <el-button
              type="primary"
              size="small"
              icon="Plus"
              @click="addSku(row)"
              title="添加SkU"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              title="修改SPU"
              @click="udateSpu(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="View"
              title="查看SPU"
              @click="lookSpu(row.id)"
            ></el-button>
            <el-popconfirm
              :title="`您确定删除${row.spuName}`"
              width="250px"
              icon="delete"
              @confirm="removeSpu(row.id)"
            >
              <template #reference>
                <el-button type="danger" size="small" icon="Delete"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        background
        :page-sizes="[3, 7, 9, 15]"
        layout=" prev, pager, next, jumper,->, sizes, total,"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="getList"
      />
    </div>
    <!-- 添加spu或者修改spu -->
    <spuForm ref="spu" v-show="sceen == 1" @changeSceen="changeSceen"></spuForm>
    <!-- 添加sku -->
    <skuForm ref="sku" v-show="sceen == 2" @changeSceen="changeSku"></skuForm>
  </el-card>
  <el-dialog v-model="show" title="SKU列表">
    <el-table :data="skuArr">
      <el-table-column label="SKU名字" prop="skuName"></el-table-column>
      <el-table-column label="SKU价格" prop="price"></el-table-column>
      <el-table-column label="SKU重量" prop="weight"></el-table-column>
      <el-table-column label="SKU图片">
        <template #="{ row, $index }">
          <img
            :src="row.skuDefaultImg"
            alt=""
            style="width: 100px; height: 100px"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Category from '@/components/Category/index.vue'
import { reqHasSpu, reqSkuList, reqRemoveSpu } from '@/api/product/spu/index.ts'
import {
  HasSpuResponseData,
  Records,
  SpuData,
  SkuData,
} from '@/api/product/spu/type'
import skuForm from './skuForm.vue'
import spuForm from './spuForm.vue'
import useCategoryStore from '@/store/modules/category'
import { ElMessage } from 'element-plus'
let categoryStore = useCategoryStore()
const sceen = ref<number>(0)
const tableData = ref<Records>([])
const pageNo = ref<number>(1)
const limit = ref<number>(3)
const total = ref<number>(0)
const spu = ref<any>(null)
const sku = ref<any>(null)
const skuArr = ref<SkuData[]>([])
const show = ref<boolean>(false)

const getList = async (pager = 1) => {
  pageNo.value = pager
  const { c3Id } = categoryStore
  const res: HasSpuResponseData = await reqHasSpu(
    pageNo.value,
    limit.value,
    c3Id,
  )
  if (res.code == 200) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
// 监听三级分类的id刷新列表
watch(
  () => categoryStore.c3Id,
  () => {
    tableData.value = []
    if (!categoryStore.c3Id) return
    getList()
  },
)
//
const handleSizeChange = () => {
  getList()
}

//添加SPU
const addSpu = () => {
  sceen.value = 1
  // 调用子组件的方法初始化方法
  spu.value.initAddSpu(categoryStore.c3Id)
}
// 修改
const udateSpu = (row: SpuData) => {
  sceen.value = 1
  spu.value.initHasSpuData(row)
  // console.log(spu.value.initHasSpuData)
  // 调用自组件的方法，获取spu的数据
}
// 查看
const lookSpu = async (id: number) => {
  const res = await reqSkuList(id)
  if (res.code == 200) {
    skuArr.value = res.data
    show.value = true
  }
}
// 删除
const removeSpu = async (id: number) => {
  const res = await reqRemoveSpu(id)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: '删除品牌成功',
    })
    //再次获取已有的品牌数据
    getList(tableData.value.length > 1 ? pageNo.value : pageNo.value - 1)
  } else {
    ElMessage({
      type: 'error',
      message: res.data,
    })
  }
}
// 子组件通知父组件修改值  形参接受子组件传递的参数
const changeSceen = (obj: any) => {
  sceen.value = obj.sceen
  console.log(obj)
  if (obj.params == 'update') {
    getList(pageNo.value)
  } else {
    getList()
  }
}
const changeSku = (obj: any) => {
  sceen.value = obj.sceen
}
// 添加一个sku
const addSku = (row: SpuData) => {
  sceen.value = 2
  sku.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}
</script>

<style lang="scss" scoped></style>
